<!-- 个人拍卖上传相关拍卖信息 -->
<template>
    <div class="sellInfo">
        <el-form :model="form" class="info">
            <div class="infoLeft">
                <el-form-item label="商品名称">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" style="margin-left:27px ;" />
                </el-form-item>
                <el-form-item label="出版社">
                    <el-input v-model="form.publisiher" style="margin-left:16px ;" />
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-input v-model="form.pubTime" />
                </el-form-item>
                <el-form-item label="开本">
                    <el-input v-model="form.fofio" style="margin-left:27px ;" />
                </el-form-item>
                <el-form-item label="装帧">
                    <el-input v-model="form.binding" style="margin-left:27px ;" />
                </el-form-item>
                <el-form-item label="品相">
                    <el-input v-model="form.physiognomy" style="margin-left:27px ;" />
                </el-form-item>
                <el-form-item label="起拍价格">
                    <el-input-number v-model="form.price" :step="5" min=50 max=190 />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="margin-left: 300px;">提交</el-button>
                </el-form-item>
            </div>

            <div class="infoRight">
                <AvatarUpload @get-img-src="getCoverFn"></AvatarUpload>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts">
import { goodsInfo } from '@/utils/api';
import form from 'element-plus/es/components/form';
import { defineComponent } from 'vue';
import AvatarUpload from '../components/avatarUpload.vue';
export default defineComponent({
    data() {
        return {
            form: {
                title: "",
                author: "",
                price: 50,
                publisiher: "",
                pubTime: "",
                fofio: "",
                physiognomy: "",
                binding: "",
                cover: "",
            }
        };
    },
    methods: {
        onSubmit() {
            goodsInfo(this.form).then((res) => {
                if (res.data.code === 1) {
                    alert(res.data.msg + ',你可在个人中心查看拍卖进度');
                }
                console.log(res);
            }).catch((error) => {
                console.log(error);
            })
        },
        getCoverFn(imgSrc: string) {
            this.form.cover = imgSrc;
            // console.log(imgSrc,this.form.cover);    
        }
    },
    components: { AvatarUpload }
})
</script>

<style lang="scss" scoped>
.sellInfo {
    width: 800px;
    padding: 40px;
    background-color: #F5E7D7;
    margin: 50px auto;
    >.info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
    }
}

:deep .el-input {
    width: 500px;
}

:deep .el-input-number__increase {
    left: 470px;
}
</style>